<template>
  <el-dialog
      v-model="dialogVisible"
      title="生产任务详情"
      width="70%"
      :before-close="handleClose"
  >
    <div v-loading="loading">
      <el-descriptions v-if="task" :column="2" border>
        <el-descriptions-item label="任务ID">{{ task.taskId }}</el-descriptions-item>
        <el-descriptions-item label="工单ID">{{ task.orderId }}</el-descriptions-item>
        <el-descriptions-item label="订单项ID">{{ task.orderItemId || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="产品ID">{{ task.productId }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ task.productName || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="产品描述">{{ task.productDescription || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ task.customerName || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="交货日期">{{ task.dueDate || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-tag :type="getPriorityTagType(task.priority)">
            {{ task.priorityDescription || getPriorityLabel(task.priority) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="任务数量">{{ task.quantity }}</el-descriptions-item>
        <el-descriptions-item label="分配机器ID">{{ task.machineId || '未分配' }}</el-descriptions-item>
        <el-descriptions-item label="标准作业时间(分钟)">{{ task.standardTime || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="计划作业时间(分钟)">{{ task.plannedTime || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTagType(task.status)">
            {{ task.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="计划开始时间">{{ task.plannedStart || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="计划结束时间">{{ task.plannedEnd || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="实际开始时间">{{ task.actualStart || '未开始' }}</el-descriptions-item>
        <el-descriptions-item label="实际结束时间">{{ task.actualEnd || '未完成' }}</el-descriptions-item>
      </el-descriptions>

      <div v-else class="no-data">
        <el-empty description="未找到任务详情" />
      </div>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const props = defineProps({
  modelValue: Boolean,
  taskId: String
});

const emit = defineEmits(['update:modelValue']);

const loading = ref(false);
const task = ref(null);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

// 监听taskId变化，加载任务详情
watch(() => props.taskId, async (newTaskId) => {
  if (newTaskId && props.modelValue) {
    await loadTaskDetail(newTaskId);
  }
});

// 监听弹窗显示状态
watch(() => props.modelValue, async (show) => {
  if (show && props.taskId) {
    await loadTaskDetail(props.taskId);
  }
});

// 加载任务详情
const loadTaskDetail = async (taskId) => {
  if (!taskId) return;

  loading.value = true;
  try {
    // 从父组件的任务列表中查找任务
    const parentComponent = getCurrentInstance()?.parent;
    if (parentComponent && parentComponent.exposed?.getTaskById) {
      task.value = parentComponent.exposed.getTaskById(taskId);
    } else {
      // 如果找不到父组件方法，尝试从全局store或其他方式获取
      console.warn('未找到获取任务详情的方法');
    }
  } catch (error) {
    console.error('加载任务详情失败:', error);
  } finally {
    loading.value = false;
  }
};

// 优先级标签类型
const getPriorityTagType = (priority) => {
  const types = { 1: 'danger', 2: 'warning', 3: 'info' };
  return types[priority] || 'default';
};

// 优先级标签
const getPriorityLabel = (priority) => {
  const labels = { 1: '高', 2: '中', 3: '低' };
  return labels[priority] || '未知';
};

// 状态标签类型
const getStatusTagType = (status) => {
  const types = {
    '待分配': 'info',
    '已分配': 'warning',
    '进行中': 'primary',
    '已完成': 'success'
  };
  return types[status] || 'default';
};

const handleClose = (done) => {
  dialogVisible.value = false;
  done();
};

// 暴露方法给父组件
defineExpose({
  setTaskDetail: (taskDetail) => {
    task.value = taskDetail;
  }
});
</script>

<style scoped>
.no-data {
  text-align: center;
  padding: 40px 20px;
}
</style>